import React, { useState } from 'react';
import {
  Table, Card, Button, Tag, Space, Image, Modal,
  Descriptions, Tabs, Input, Select,
  Row, Col,
  Skeleton,
  Typography,

} from 'antd';
import {
  PlusOutlined, SearchOutlined, EditOutlined,
  EyeOutlined, MoreOutlined,
  DownloadOutlined
} from '@ant-design/icons';
import { ProductPackageDetails } from './ProductPackageDetails';

import { useNavigate } from "react-router-dom";
const { Title, Text } = Typography;
// 模拟套餐数据
const packageData = [
  {
    id: 'PP202305001',
    name: '中医养生套餐A',
    cover: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/c827d961d62a4874b91ec6c93f8db529.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=202509181612593A8BAF873C1033E9A87C&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1758787979&x-signature=tea3mpjGymRJiXaTWkOu%2B%2BKioB4%3D',
    price: 680,
    originalPrice: 880,
    status: '在售',
    enableStatus: '启用',
    validPeriod: '2023-05-01 至 2024-05-01',
    items: 5,
    details: {
      description: '本套餐专为长期办公室工作人群设计，通过中医传统理疗方法，缓解身体疲劳，改善亚健康状态。',
      includes: [
        '针灸疗法 × 2次',
        '推拿按摩 × 3次',
        '艾灸调理 × 2次',
        '中药泡脚 × 5次',
        '中医体质辨识 × 1次'
      ],
      precautions: '1. 理疗前请告知医师您的健康状况和过敏史\n2. 理疗后24小时内避免受凉\n3. 孕妇、高血压患者等特殊人群请提前咨询医师',
      validity: '购买后365天内有效，节假日通用',
      remarks: '需提前1-2天预约，可转让他人使用'
    }
  },
  {
    id: 'PP202305002',
    name: '肩颈理疗套餐',
    cover: 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/bcf360894bb046f7b6c14295da9a57af.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=2025091816333932755BF61C9E9321B39F&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1758789220&x-signature=BoUrI0fvTdOc0u%2Bf4Rj9NryinL0%3D',
    price: 398,
    originalPrice: 498,
    status: '在售',
    enableStatus: '启用',
    validPeriod: '2023-05-10 至 2024-05-10',
    items: 3,
    details: {
      description: '针对现代人群常见的肩颈问题，结合中医理疗手法，有效缓解肩颈酸痛、僵硬，改善血液循环。',
      includes: [
        '肩颈推拿 × 3次',
        '刮痧排毒 × 1次',
        '中药热敷 × 3次'
      ],
      precautions: '1. 理疗后可能出现轻微酸痛，属正常现象\n2. 皮肤破损者暂不适合刮痧\n3. 理疗后多饮水，帮助排毒',
      validity: '购买后180天内有效',
      remarks: '建议每周进行1次，连续3周效果更佳'
    }
  },
  {
    id: 'PP202306001',
    name: '夏季祛湿排毒套餐',
    cover: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/075f082fac5d441ab5d633932711cc147.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=202509181656236E118166CA26A0EAB210&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1758790583&x-signature=cATV02XkICLekTukXHRGcekwm5g%3D',
    price: 980,
    originalPrice: 1280,
    status: '在售',
    enableStatus: '启用',
    validPeriod: '2023-06-01 至 2023-09-30',
    items: 6,
    details: {
      description: '夏季专属祛湿排毒套餐，结合中医理论，通过多种理疗方式，帮助排出体内湿气，改善夏季不适症状。',
      includes: [
        '拔罐疗法 × 3次',
        '艾灸除湿 × 4次',
        '中药熏蒸 × 2次',
        '经络疏通 × 3次',
        '祛湿茶饮 × 5份',
        '中医养生指导 × 1次'
      ],
      precautions: '1. 理疗期间饮食宜清淡，忌生冷油腻\n2. 熏蒸后避免立即外出\n3. 女性生理期建议暂停理疗',
      validity: '购买后90天内有效，仅限夏季使用',
      remarks: '套餐包含的祛湿茶饮可带走'
    }
  },
  {
    id: 'PP202304001',
    name: '中医康复套餐',
    cover: 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/a095766ddd8c4d1b88d9801f49ba2396.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=20250918170909DDF64B8D0DCC2813E37A&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1758791349&x-signature=1ZXIBLG8sHfO3wzSL5DJRd%2B3Ka4%3D',
    price: 1680,
    originalPrice: 1980,
    status: '下架',
    enableStatus: '禁用',
    validPeriod: '2023-04-01 至 2023-04-30',
    items: 10,
    details: {
      description: '针对术后或伤病恢复期人群设计的专业康复套餐，通过中医理疗加速恢复过程，减轻康复期间的不适。',
      includes: [
        '康复推拿 × 5次',
        '针灸治疗 × 5次',
        '中药外敷 × 10次',
        '康复指导 × 3次',
        '康复评估 × 2次'
      ],
      precautions: '1. 请提供详细的病历和康复需求\n2. 理疗方案会根据康复情况调整\n3. 需严格按照医师指导进行居家康复训练',
      validity: '购买后120天内有效',
      remarks: '需医生评估后使用，不适合急性病发作期'
    }
  }
];

// 状态标签样式映射
const statusMap = {
  '在售': <Tag color="success">在售</Tag>,
  '预售': <Tag color="processing">预售</Tag>,
  '下架': <Tag color="default">下架</Tag>
};

// 启用状态标签样式映射
const enableStatusMap = {
  '启用': <Tag color="success">启用</Tag>,
  '禁用': <Tag color="error">禁用</Tag>
};

export const ProductPackage = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedPackage, setSelectedPackage] = useState(null);
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [enableFilter, setEnableFilter] = useState('all');
  const navigate = useNavigate();
  const [isShow, set_isShow] = useState(true);
  setTimeout(() => {
    set_isShow(false);
  }, 2000);
  // 处理查看详情
  const handleViewDetail = (record) => {
    setSelectedPackage(record);
    setIsModalVisible(true);
  };

  // 筛选数据
  const filteredData = packageData.filter(item => {
    const matchesSearch = item.name.toLowerCase().includes(searchText.toLowerCase());
    const matchesStatus = statusFilter === 'all' || item.status === statusFilter;
    const matchesEnable = enableFilter === 'all' || item.enableStatus === enableFilter;

    return matchesSearch && matchesStatus && matchesEnable;
  });

  // 表格列定义
  const columns = [
    {
      title: '套餐ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
    },
    {
      title: '套餐名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <div>
          <div>{text}</div>
          <div style={{ fontSize: 12, color: '#888' }}>包含{record.items}个理疗项目</div>
        </div>
      ),
    },
    {
      title: '封面',
      dataIndex: 'cover',
      key: 'cover',
      width: 100,
      render: (cover) => (
        <Image
          src={cover}
          alt="套餐封面"
          width={80}
          height={50}
          preview={false}
          style={{ objectFit: 'cover', borderRadius: 4 }}
        />
      ),
    },
    {
      title: '售价/原价',
      key: 'price',
      render: (_, record) => (
        <div>
          <div style={{ color: '#f50' }}>¥{record.price.toFixed(2)}</div>
          <div style={{ fontSize: 12, color: '#888', textDecoration: 'line-through' }}>¥{record.originalPrice.toFixed(2)}</div>
        </div>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => statusMap[status],
    },
    {
      title: '启用状态',
      dataIndex: 'enableStatus',
      key: 'enableStatus',
      render: (enableStatus) => enableStatusMap[enableStatus],
    },
    {
      title: '有效期',
      dataIndex: 'validPeriod',
      key: 'validPeriod',
      render: (period) => (
        <div style={{ whiteSpace: 'normal', lineHeight: 1.5 }}>{period}</div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            icon={<EyeOutlined />}
            onClick={() => handleViewDetail(record)}
            size="small"
          >
            详情
          </Button>


        </Space>
      ),
    },
  ];

  return (
    <div>
      {isShow ? (
        <Skeleton paragraph={{ rows: 10 }} active></Skeleton>
      ) : (
        <div style={{ padding: 24, background: '#fff', minHeight: 'calc(100vh - 64px)' }}>

          {/* 页面标题和操作按钮 */}
          <div style={{ display: "flex", marginBottom: 10, justifyContent: "space-between" }}>
            <div style={{ width: 250 }}>
              <Title level={2} className="text-secondary">产品套餐</Title>
              <Text type="secondary">管理所有的产品套餐</Text>
            </div>
            <div style={{ marginTop: "16px", display: "flex", gap: 10 }}>
              <Button
                icon={<DownloadOutlined />}
                style={{ marginTop: 6 }}
                className="border border-gray-300"
                onClick={() => {
                  navigate("/product/addProductPackage")
                }}
              >
                创建套餐
              </Button>

            </div>
          </div>


          {/* 筛选区域 */}
          <Row gutter={16} style={{ marginBottom: 16 }}>
            <Col xs={24} sm={8} md={6}>
              <Input
                placeholder="搜索套餐名称"
                prefix={<SearchOutlined />}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
              />
            </Col>
            <Col xs={24} sm={8} md={6}>
              <Select
                placeholder="选择状态"
                style={{ width: '100%' }}
                value={statusFilter}
                onChange={setStatusFilter}
              >
                <Select.Option value="all">全部状态</Select.Option>
                <Select.Option value="在售">在售</Select.Option>
            
                <Select.Option value="下架">下架</Select.Option>
              </Select>
            </Col>
            <Col xs={24} sm={8} md={6}>
              <Select
                placeholder="选择启用状态"
                style={{ width: '100%' }}
                value={enableFilter}
                onChange={setEnableFilter}
              >
                <Select.Option value="all">启用状态</Select.Option>
                <Select.Option value="启用">启用</Select.Option>
                <Select.Option value="禁用">禁用</Select.Option>
              </Select>
            </Col>
          </Row>

          {/* 套餐列表表格 */}
          <Card>
            <Table
            bordered
              columns={columns}
              dataSource={filteredData}
              rowKey="id"
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total) => `共 ${total} 个套餐`
              }}
              scroll={{ x: 'max-content' }}
            />
          </Card>

          {/* 套餐详情模态框 */}
          <Modal
            title={`${selectedPackage?.name} - 详情`}
            open={isModalVisible}
            onCancel={() => setIsModalVisible(false)}
            footer={null}
            width={800}
            destroyOnHidden
          >
            {selectedPackage && (
              <ProductPackageDetails data={selectedPackage}></ProductPackageDetails>
            )}
          </Modal>
        </div>
      )}
    </div>

  );
};

export default ProductPackage;
